<template>
    <view class="page">
        <view class="back">
            <view>{{ statusObj[status] }}</view>
        </view>
        <block v-if="status == 1 || status == 11">
            <view class="box" v-for="(item, index) in obj.orderInfo" :key="item.id"
                :style="{ 'marginTop': index == 0 ? '-212rpx' : '30rpx' }">
                <view class="box-1">消费信息</view>
                <view class="box-2"><span>*</span>{{ item.type_str }}</view>
                <view class="box-3 flex">
                    <image :src="showImgApi + item.img" mode="scaleToFill" />
                    <view class="box-3-1">
                        {{ item.title }}
                    </view>
                </view>
                <view class="box-4 flex">
                    数量
                    <view class="box-4-1">X{{ item.num }}</view>
                </view>
                <view class="box-4 flex">
                    单价
                    <view class="box-4-1">{{ item.people_price }}元</view>
                </view>
                <view class="box-4 flex">
                    商品总额
                    <view class="box-4-1">{{ item.total_price }}元</view>
                </view>
            </view>
            <view class="box" style="margin-top: 30rpx;">
                <view class="box-1">提货信息</view>
                <view class="box-4 flex">
                    {{ obj.order.consignee }}
                    <view class="box-4-1">{{ obj.order.phone }}</view>
                </view>
            </view>
            <view class="box" style="margin-top: 30rpx;">
                <view class="box-1">订单信息</view>
                <view class="box-4 flex">
                    订单编号
                    <view class="box-4-1">{{ obj.orderInfo[0].order_no }}</view>
                </view>
                <view class="box-4 flex">
                    创建时间
                    <view class="box-4-1">{{ obj.orderInfo[0].created_at }}</view>
                </view>
            </view>
        </block>
        <block v-else>
            <view class="box">
                <view class="box-1">消费信息</view>
                <view class="box-2"><span>*</span>{{ obj.type_str }}</view>
                <view class="box-3 flex">
                    <image :src="showImgApi + obj.img" mode="scaleToFill" />
                    <view class="box-3-1">
                        {{ obj.title }}
                    </view>
                </view>
                <view class="box-4 flex">
                    数量
                    <view class="box-4-1">X{{ obj.num }}</view>
                </view>
                <view class="box-4 flex">
                    单价
                    <view class="box-4-1">{{ obj.people_price }}元</view>
                </view>
                <view class="box-4 flex">
                    商品总额
                    <view class="box-4-1">{{ obj.total_price }}元</view>
                </view>
            </view>
            <view class="box" style="margin-top: 30rpx;">
                <view class="box-1">提货信息</view>
                <view class="box-4 flex">
                    {{ obj.consignee }}
                    <view class="box-4-1">{{ obj.phone }}</view>
                </view>
            </view>
            <view class="box" style="margin-top: 30rpx;">
                <view class="box-1">订单信息</view>
                <view class="box-4 flex">
                    订单编号
                    <view class="box-4-1">{{ obj.order_no }}</view>
                </view>
                <view class="box-4 flex">
                    创建时间
                    <view class="box-4-1">{{ obj.created_at }}</view>
                </view>
            </view>
        </block>
        <view class="kong"></view>
        <view class="bottom-flex" v-if="status == 1 || status == 4">
            <view class="btn-save" @click="handleShop" v-if="status == 4">查看提货码</view>
            <!-- <view v-if="status == 4" @click="handleScance">核销</view> -->
            <block v-else-if="status == 1">
                <view class="btn-save previous cacel" style="margin-right: 30rpx;" @click="handleCancel">取消订单</view>
                <view class="btn-save previous" @click="handlePay">立即支付</view>
            </block>
        </view>
        <u-popup :show="show" @close="show = false" mode="center" :round="10">
            <view class="er">
                <tki-qrcode v-if="ifShow" cid="qrcode1" ref="qrcode" :val="val" :size="size" :unit="unit"
                    :background="background" :foreground="foreground" :pdground="pdground" :icon="icon"
                    :iconSize="iconsize" :lv="lv" :onval="onval" :loadMake="loadMake" :usingComponents="true"
                    @result="qrR" />
                <view class="text">请到店后出示提货码给店员核销</view>
            </view>
        </u-popup>
    </view>
</template>
<script>
import {
    orderInfoDetails, orderDetails, orderCancel, orderUse, orderPay
} from '@/utils/request.js'
import tkiQrcode from "../active/components/tki-qrcode/tki-qrcode.vue";
export default {
    data() {
        return {
            id: '',
            obj: {},
            showImgApi: this.$config.showImgApi,
            status: '',
            order_id: '',
            show: false,
            statusObj: { 1: '待支付', 2: '待发货', 3: '待收货', 4: '待使用', 5: '已使用', 10: '已退款', 11: '已取消' },
            val: "", // 要生成的二维码值
            size: 150, // 二维码大小
            unit: "rpx", // 单位
            background: "#ffffff", // 背景色
            foreground: "#000000", // 前景色
            pdground: "#000000", // 角标色
            icon: "", // 二维码图标
            iconsize: 20, // 二维码图标大小
            lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
            onval: true, // val值变化时自动重新生成二维码
            loadMake: true, // 组件加载完成后自动生成二维码
            src: "", // 二维码生成后的图片地址或base64
            shareIshow: false,
            ifShow: true,
            isScanning: false,
        }
    },
    components: {
        tkiQrcode,
    },
    onLoad(option) {
        this.id = option.id
        this.order_id = option.order_id
        this.status = option.status
        const data = { id: this.id }
        if (this.status == 1 || this.status == 11) {
            data.id = this.order_id
            this.orderDetails(data).then(res => {
                this.obj = res
            })
        } else {
            this.orderInfoDetails(data).then(res => {
                this.obj = res.row
            })
        }
    },
    methods: {
        async orderInfoDetails(data) {
            return await orderInfoDetails(data)
        },
        async orderPay(data) {
            return await orderPay(data)
        },
        async orderDetails(data) {
            return await orderDetails(data)
        },
        async orderCancel(data) {
            return await orderCancel(data)
        },
        async orderUse(data) {
            return await orderUse(data)
        },
        handleScance() {
            let that = this;
            if (that.isScanning) return;
            uni.scanCode({
                success: function (res) {
                    const data = { id: res.result.split("=")[1] };
                    that.orderUse(data).then((res) => {
                        if (res) {
                            uni.showToast({
                                title: "验票成功",
                                icon: "none",
                            });
                        }
                    });
                },
                fail: function (err) {
                    console.error("扫码失败：", err);
                },
                complete: function () {
                    setTimeout(() => {
                        that.isScanning = false;
                    }, 500); // 延迟500毫秒后允许再次调用
                },
            });
        },
        handleShop() {
            this.show = true;
            let token = uni.getStorageSync('token')
            this.val = `https://atuanjian.com/scancodeHtml/index.html?id=${this.id}&token=${token}`;
        },
        handlePay() {
            // #ifdef H5
            const date = { id: this.id, platform: 1 }
            // #endif
            // #ifdef MP-WEIXIN
            const date = { id: this.id, platform: 2 }
            // #endif
            this.orderPay(date).then(res => {
                // #ifdef MP-WEIXIN
                if (res) {
                    uni.requestPayment({
                        timeStamp: res.timeStamp,
                        nonceStr: res.nonceStr,
                        package: res.package,
                        signType: res.signType,
                        paySign: res.paySign,
                        success: (res) => {
                            uni.showToast({
                                title: "支付成功",
                                icon: "none",
                            });
                            setTimeout(() => {
                                uni.navigateBack({ delta: 1 });
                            }, 1500);
                        },
                        faile: (err) => {
                            if (err.errMsg === 'requestPayment:fail cancel') {
                                console.log('用户取消了支付');
                                // 用户取消支付后的逻辑处理
                            } else {
                                console.error('支付失败', err);
                                // 其他支付失败原因的处理
                            }
                        },
                    });
                }
                // #endif
                // #ifdef H5
                if (res) {
                    uni.requestPayment({
                        provider: "wxpay",
                        orderInfo: {
                            appid: res.appId,
                            noncestr: res.nonceStr,
                            package: res.package,
                            // partnerid: "148*****52",
                            // prepayid: "wx202254********************fbe90000", // 统一下单订单号
                            timestamp: res.timeStamp, // 时间戳（单位：秒）
                            sign: res.signType, // 签名，这里用的 MD5/RSA 签名
                        },
                        success: (res) => {
                            uni.showToast({
                                title: "支付成功",
                                icon: "none",
                            });
                            setTimeout(() => {
                                uni.navigateBack({ delta: 1 });
                            }, 1500);
                        },
                        faile: (err) => {
                            console.log(err, "err");
                        },
                    });
                }
                // #endif
            })
        },

        handleCancel() {
            uni.showModal({
                title: "提示",
                content: "是否取消该订单",
                showCancel: true,
                success: ({ confirm, cancel }) => {
                    if (confirm) {
                        const data = { id: this.order_id }
                        this.orderCancel(data).then(res => {
                            if (res) {
                                uni.showToast({
                                    title: '取消成功',
                                    icon: 'none',
                                    mask: true
                                })
                                setTimeout(() => {
                                    uni.navigateBack({ delta: 1 })
                                }, 1500)
                            }
                        })
                    }
                },
            });
        },
    }
}
</script>
<style lang="scss" scoped>
.page {
    .kong {
        height: 150rpx;
    }

    .er {
        width: 568rpx;
        height: 568rpx;
        left: 0;
        right: 0;
        margin: 0 auto;
        overflow: hidden;
        background: #ffffff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 12rpx;

        .text {
            text-align: center;
            width: 435rpx;
            margin: 40rpx auto 0;
        }
    }

    .bottom-flex {
        width: 100%;
        height: 155rpx;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 9;
        background: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;

        .btn-save {
            width: 580rpx;
            height: 88rpx;
            background-color: #ffb850;
            border-radius: 41rpx;
            font-size: 30rpx;
            color: #ffffff;
            text-align: center;
            line-height: 88rpx;
        }

        .previous {
            width: 343rpx;
            border: 1rpx;
        }

        .cacel {
            background-color: #ffffff;
            color: rgb(255, 184, 80);
            border: 1rpx solid rgb(255, 184, 80);
        }
    }

    .back {
        width: 100%;
        height: 300rpx;
        padding-top: 24px;
        font-size: 40rpx;
        color: #ffffff;
        background: rgb(255, 184, 80);
        border-bottom-left-radius: 10% 20px;
        border-bottom-right-radius: 10% 20px;

        view {
            margin-left: 38rpx;
        }
    }

    .box {
        width: 638rpx;
        padding: 34rpx 28rpx;
        background-color: #ffffff;
        margin: -212rpx auto 0;
        border-radius: 16rpx;

        .box-1 {
            padding-bottom: 37rpx;
            border-bottom: 1rpx solid rgb(161, 161, 161);
            font-size: 28rpx;
        }

        .box-2 {
            font-size: 22rpx;
            margin-top: 56rpx;

            span {
                color: rgb(255, 184, 80);
            }
        }

        .box-3 {
            margin-top: 24rpx;
            align-items: center;

            image {
                width: 86rpx;
                height: 86rpx;
            }

            .box-3-1 {
                flex: 1;
                font-size: 26rpx;
                margin-left: 6rpx;
            }
        }

        .box-4 {
            justify-content: space-between;
            font-size: 25rpx;
            padding: 20rpx 0;
            color: rgb(127, 127, 127);

            .box-4-1 {
                color: rgb(22, 22, 24);
            }
        }
    }
}
</style>